{include file='pub/base' /}
<style>
html,body{height:100%;background-color: #3a4144;}
</style>
    <link href="__Flow__/css/bootstrap/css/bootstrap.css?" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="__Flow__/css/bootstrap/css/bootstrap-ie6.css?">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="__Flow__/css/bootstrap/css/ie.css?">
    <![endif]-->
    <link href="__Flow__/css/site.css?" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="__Flow__/js/flowdesign/flowdesign.css"/>
<!--select 2-->
<link rel="stylesheet" type="text/css" href="__Flow__/js/jquery.multiselect2side/css/jquery.multiselect2side.css"/>
<!-- fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <div class="pull-right">
        <button class="btn btn-info" type="button" id="leipi_save">保存设计</button>
      </div>

      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="javascript:void(0);">正在设计【{$one.flow_name}】</a></li>
        </ul>
      </div>
      
    </div><!-- container -->
  </div>
</div>
<!-- end fixed navbar -->
<!--contextmenu div-->
<div id="processMenu" style="display:none;">
  <ul>
    <li id="pmAttribute"><i class="icon-cog"></i>&nbsp;<span class="_label">属性</span></li>
    <li id="pmSetting"><i class=" icon-wrench"></i>&nbsp;<span class="_label">样式</span></li>
    <li id="pmDelete"><i class="icon-trash"></i>&nbsp;<span class="_label">删除</span></li>
  </ul>
</div>
<div id="canvasMenu" style="display:none;">
  <ul>
    <li id="cmSave"><i class="icon-ok"></i>&nbsp;<span class="_label">保存设计</span></li>
    <li id="cmAdd"><i class="icon-plus"></i>&nbsp;<span class="_label">添加步骤</span></li>
    <li id="cmRefresh"><i class="icon-refresh"></i>&nbsp;<span class="_label">刷新</span></li>
    <li id="cmHelp"><i class="icon-search"></i>&nbsp;<span class="_label">帮助</span></li>
  </ul>
</div>
<!--end div--> 
<div class="container mini-layout" id="flowdesign_canvas">

</div> <!-- /container -->
<script type="text/javascript" src="__Flow__/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="__Flow__/css/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="__Flow__/js/jquery-ui/jquery-ui-1.9.2-min.js?" ></script>
<script type="text/javascript" src="__Flow__/js/jsPlumb/jquery.jsPlumb-1.3.16-all-min.js"></script>
<script type="text/javascript" src="__Flow__/js/jquery.contextmenu.r2.js?"></script>
<!--select 2-->
<script type="text/javascript" src="__Flow__/js/jquery.multiselect2side/js/jquery.multiselect2side.js" ></script>
<!--flowdesign-->
<script type="text/javascript" src="__Flow__/js/flowdesign/leipi.flowdesign.v3.js?"></script>
<script type="text/javascript">
var the_flow_id ='{$one.id}';
$(function(){
    var attributeModal =  $("#attributeModal");
    //属性设置
    attributeModal.on("hidden", function() {
        $(this).removeData("modal");//移除数据，防止缓存
    });
    /*步骤数据*/
    var processData = {$process_data|raw};
    /*创建流程设计器*/
    var _canvas = $("#flowdesign_canvas").Flowdesign({
                      "processData":processData
                      /*画面右键*/
                      ,canvasMenus:{
                        "cmAdd": function(t) {
                            var mLeft = parseInt($("#jqContextMenu").css("left")),mTop = parseInt($("#jqContextMenu").css("top"));
                            var url = "{:url('add_process')}";
                            $.post(url,{"flow_id":the_flow_id,"left":mLeft,"top":mTop},function(data){
							
                                if(data.status==1)
                                {
									location.reload();
                                }else if(!_canvas.addProcess(data.info))//添加
                               {
									 layer.msg("添加失败");
                               }
                               
                            },'json');

                        },
                        "cmSave": function(t) {
                            var processInfo = _canvas.getProcessInfo();//连接信息
                            var url = "{:url('save_canvas')}";
                            $.post(url,{"flow_id":the_flow_id,"process_info":processInfo},function(data){
								layer.msg(data.msg);
                            },'json');
                        },
                        "cmRefresh":function(t){
                            location.reload();//_canvas.refresh();
                        },
                        "cmHelp": function(t) {
                           layer.msg("欢迎使用");
                        }
                       
                      }
                      /*步骤右键*/
                      ,processMenus: {
                          "pmDelete":function(t)
                          {
                              if(confirm("你确定删除步骤吗？"))
                              {
                                    var activeId = _canvas.getActiveId();//右键当前的ID
                                    var url = "{:url('delete_process')}";
                                    $.post(url,{"flow_id":the_flow_id,"process_id":activeId},function(data){
                                        if(data.status==1)
                                        {
                                            _canvas.delProcess(activeId);
                                            var processInfo = _canvas.getProcessInfo();//连接信息
                                            var url = "{:url('save_canvas')}";
                                            $.post(url,{"flow_id":the_flow_id,"process_info":processInfo},function(data){
                                                location.reload();
                                            },'json');
                                            
                                        }
                                        layer.msg(data.msg);
										
                                    },'json');
                              }
                          },
                          "pmAttribute":function(t)
                          {
                              var activeId = _canvas.getActiveId();//右键当前的ID
                              var url = "{:url('attribute')}?id="+activeId;
							   layer_show('编辑',url,'700','500');
                          },
                          "pmForm": function(t) {
                                var activeId = _canvas.getActiveId();//右键当前的ID
								var url = "{:url('attribute')}?op=form&id="+activeId;
                                layer_show('编辑',url,'700','500');
                          },
                          "pmJudge": function(t) {
                                var activeId = _canvas.getActiveId();//右键当前的ID
								var url = "{:url('attribute')}?op=judge&id="+activeId;
                                layer_show('编辑',url,'700','500');
                          },
                          "pmSetting": function(t) {
                                var activeId = _canvas.getActiveId();//右键当前的ID
								var url = "{:url('attribute')}?op=style&id="+activeId;
                                layer_show('编辑',url,'700','500');
                          }
                      }
                      ,fnRepeat:function(){
                        //alert("步骤连接重复1");//可使用 jquery ui 或其它方式提示
                        layer.msg("步骤连接重复了，请重新连接");
                        
                      }
                      ,fnClick:function(){
                          var activeId = _canvas.getActiveId();
						  layer.msg("查看步骤信息 " + activeId);
                      }
                      ,fnDbClick:function(){
                          //和 pmAttribute 一样
                          var activeId = _canvas.getActiveId();//右键当前的ID
                              var url = "{:url('attribute')}?id="+activeId;
							   layer_show('编辑',url,'700','500');
                      }
                  });
    /*保存*/
    $("#leipi_save").bind('click',function(){
        var processInfo = _canvas.getProcessInfo();//连接信息
        var url = "{:url('save_canvas')}";
        $.post(url,{"flow_id":the_flow_id,"process_info":processInfo},function(data){
			layer.msg(data.msg);
        },'json');
    });
});

 
</script>